<template>
  <div class="pagination-wrapper">
    <el-pagination
      v-model:current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      :layout="layout"
      :background="false"
      :small="small"
      :disabled="disabled"
      :hide-on-single-page="hideOnSinglePage"
      :page-sizes="pageSizes"
      :popper-class="popperClass"
      :prev-text="prevText"
      :next-text="nextText"
      :pager-count="pagerCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      @prev-click="handlePrevClick"
      @next-click="handleNextClick" />
  </div>
</template>

<script setup lang="ts">
  import { ref, watch } from 'vue';

  // Props 定义
  interface Props {
    // 当前页码
    currentPage?: number;
    // 每页显示条目个数
    pageSize?: number;
    // 总条目数
    total: number;
    // 组件布局，子组件名用逗号分隔
    layout?: string;
    // 是否使用小型分页样式
    small?: boolean;
    // 是否禁用
    disabled?: boolean;
    // 只有一页时是否隐藏
    hideOnSinglePage?: boolean;
    // 每页显示个数选择器的选项设置
    pageSizes?: number[];
    // 每页显示个数选择器的下拉框类名
    popperClass?: string;
    // 替代图标文字为上一页
    prevText?: string;
    // 替代图标文字为下一页
    nextText?: string;
    // 设置最大页码按钮数
    pagerCount?: number;
  }

  const props = withDefaults(defineProps<Props>(), {
    currentPage: 1,
    pageSize: 20,
    layout: 'prev, pager, next',
    background: true,
    small: false,
    disabled: false,
    hideOnSinglePage: false,
    pageSizes: () => [10, 20, 50, 100],
    popperClass: '',
    prevText: '',
    nextText: '',
    pagerCount: 7,
  });

  // Emits 定义
  interface Emits {
    (e: 'update:currentPage', page: number): void;
    (e: 'update:pageSize', size: number): void;
    (e: 'size-change', size: number): void;
    (e: 'current-change', page: number): void;
    (e: 'prev-click', page: number): void;
    (e: 'next-click', page: number): void;
  }

  const emit = defineEmits<Emits>();

  // 响应式数据
  const currentPage = ref(props.currentPage);

  // 监听 props 变化
  watch(
    () => props.currentPage,
    (newVal) => {
      currentPage.value = newVal;
    }
  );

  // 事件处理
  const handleSizeChange = (size: number) => {
    emit('update:pageSize', size);
    emit('size-change', size);
  };

  const handleCurrentChange = (page: number) => {
    currentPage.value = page;
    emit('update:currentPage', page);
    emit('current-change', page);
  };

  const handlePrevClick = (page: number) => {
    emit('prev-click', page);
  };

  const handleNextClick = (page: number) => {
    emit('next-click', page);
  };
</script>

<style lang="scss" scoped>
  .pagination-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;

    :deep(.el-pagination) {
      .el-pagination__total {
        color: #222;
        font-size: 14px;
      }

      .el-pagination__jump {
        color: #222;
        font-size: 14px;
      }

      .el-pagination__sizes {
        .el-select {
          .el-input {
            .el-input__inner {
              color: #222;
              font-size: 14px;
            }
          }
        }
      }

      .btn-prev,
      .btn-next {
        color: #222;
        background: transparent;

        &:hover {
          color: #222;
          border-color: #222;
        }

        &.disabled {
          color: #c0c4cc;
          background: transparent;
          // border-color: #ebeef5;
          cursor: not-allowed;
        }
      }

      .el-pager {
        li {
          color: #222;
          background: transparent;
          margin: 0 4px;

          &:hover {
            background-color: rgba(225, 226, 227);
          }

          &.is-active {
            color: #fff;
            background: #222;
            border-color: #222;
          }
        }
      }
    }
  }

  // 自定义样式变体
  .pagination-wrapper.compact {
    margin: 10px 0;
    :deep(.el-pagination) {
      .btn-prev,
      .btn-next,
      .el-pager li {
        min-width: 32px;
        height: 32px;
        line-height: 30px;
        font-size: 12px;
      }
    }
  }

  .pagination-wrapper.minimal {
    :deep(.el-pagination) {
      .el-pagination__total,
      .el-pagination__jump,
      .el-pagination__sizes {
        display: none;
      }
    }
  }
</style>
